<template>
  <div>
    <!--  标题 -->
    <van-cell :title="$route.query.title">
      <template slot="extra">
        <span> {{ this.pageNumber }}/{{ idList.length }}</span>
        <van-icon
          @click="showChose = true"
          class="titleicon"
          name="label-o"
          color="#ee0a24"
        />
      </template>
    </van-cell>
    <!-- 题目渲染 -->
    <van-tabs v-model="active" animated>
      <van-tab v-for="(item, index) in resdatalist" :key="index">
        <!-- 答题 单选 b -->
        <div class="container" v-if="item.type_id === 1">
          <div class="contentText">
            <van-cell class="testtitle">
              <template slot="icon">
                <van-button
                  round
                  size="mini"
                  style="
                    backgroundcolor: #e6f7ff;
                    color: #1890ff;
                    border: 1px solid #91d5ff;
                    margin-top: 16px;
                  "
                  >单选题</van-button
                ></template
              >
              <template slot="title" style="position: relative">
                <span
                  class="titleNumber"
                  style="position: absolute; top: 10px"
                  >{{ pageNumber + "、" }}</span
                >
                <div
                  class="single"
                  style="text-indent: 20px"
                  v-html="item.title"
                ></div>
              </template>
            </van-cell>
          </div>
          <div class="choseAnswer">
            <!-- 获取对象所有属性   判断单选框个数-->
            <van-radio-group
              v-model="radio"
              v-if="Object.getOwnPropertyNames(item.option).length - 1 === 4"
            >
              <!--对象身上属性个数-->
              <!-- {{Object.getOwnPropertyNames(item.option).length-1+'个'}}  -->
              <div class="singleRadio" @click="radioSubmit(item)">
                <van-radio :checked-color="radioErr" name="A"> </van-radio
                ><span class="radiotype">A、</span
                ><span class="radioText" v-html="item.option.A.option"></span>
              </div>
              <div class="singleRadio" @click="radioSubmit(item)">
                <van-radio :checked-color="radioErr" name="B"> </van-radio
                ><span class="radiotype">B、 </span
                ><span class="radioText" v-html="item.option.B.option"></span>
              </div>
              <div class="singleRadio" @click="radioSubmit(item)">
                <van-radio :checked-color="radioErr" name="C"> </van-radio
                ><span class="radiotype">C、 </span
                ><span class="radioText" v-html="item.option.C.option"></span>
              </div>
              <div class="singleRadio" @click="radioSubmit(item)">
                <van-radio :checked-color="radioErr" name="D"> </van-radio
                ><span class="radiotype">D、 </span
                ><span class="radioText" v-html="item.option.D.option"></span>
              </div>
            </van-radio-group>
            <van-radio-group
              v-model="radio"
              v-if="Object.getOwnPropertyNames(item.option).length - 1 === 3"
            >
              <!--对象身上属性个数-->
              <!-- {{ Object.getOwnPropertyNames(item.option).length - 1 + '个' }} -->
              <div class="singleRadio" @click="radioSubmit(item)">
                <van-radio :checked-color="radioErr" name="A"> </van-radio>
                <span class="radiotype">A、</span>
                <span class="radioText" v-html="item.option.A.option"></span>
              </div>
              <div class="singleRadio" @click="radioSubmit(item)">
                <van-radio :checked-color="radioErr" name="B"> </van-radio
                ><span class="radiotype">B、</span
                ><span class="radioText" v-html="item.option.B.option"></span>
              </div>
              <div class="singleRadio" @click="radioSubmit(item)">
                <van-radio :checked-color="radioErr" name="C"> </van-radio
                ><span class="radiotype">C、</span
                ><span class="radioText" v-html="item.option.C.option"></span>
              </div>
            </van-radio-group>
            <van-radio-group
              v-model="radio"
              v-if="Object.getOwnPropertyNames(item.option).length - 1 === 2"
            >
              <!--对象身上属性个数-->
              <!-- {{ Object.getOwnPropertyNames(item.option).length - 1 + '个' }} -->
              <div class="singleRadio" @click="radioSubmit(item)">
                <van-radio :checked-color="radioErr" name="A"> </van-radio
                ><span class="radiotype">A、 </span
                ><span class="radioText" v-html="item.option.A.option"></span>
              </div>
              <div class="singleRadio" @click="radioSubmit(item)">
                <van-radio :checked-color="radioErr" name="B"> </van-radio
                ><span class="radiotype">B、 </span
                ><span class="radioText" v-html="item.option.B.option"></span>
              </div>
            </van-radio-group>
          </div>
          <!-- 底部答案 -->
          <div class="getAnswershow" v-if="showdetail">
            <div class="answer">
              <span class="blue">答案:</span>
              <span
                v-for="(item1, index) in item.correct_option"
                :key="index"
                >{{ item1 + "、 " }}</span
              >
            </div>
            <div class="consist">
              <span class="blue"> 解析:</span>
              <span>
                <span v-html="item.parse"></span>
              </span>
            </div>
          </div>
        </div>
        <!-- 多选 -->
        <div class="container" v-if="item.type_id === 2">
       <div class="contentText">     
        <div class="dragAnswer" >
              <van-cell>
                <template slot="icon">
                  <van-button class="answericon" round size="mini" type="info">
                    多选题
                  </van-button>
                </template>
                <template> <span v-html="item.title"></span> </template>
              </van-cell>
              <!-- 确定 -->
              <!-- 多选内容  -->
              <van-cell>
                <template slot="title">
                  <div
                    :class="
                      multicheck.mulFlag1 ? 'multiInput' : 'multiInputErr'
                    "
                  >
                    <input
                      type="checkbox"
                      name="selected"
                      value="A"
                      v-model="checkName"
                    />
                    <span>A、</span>
                    <label for="checkbox" v-html="item.option.A.option"></label>
                  </div>

                  <div
                    :class="
                      multicheck.mulFlag2 ? 'multiInput' : 'multiInputErr'
                    "
                  >
                    <input
                      type="checkbox"
                      name="selected"
                      value="B"
                      v-model="checkName"
                    />
                    <span>B、</span>
                    <label for="checkbox" v-html="item.option.B.option"></label>
                  </div>
                  <div
                    :class="
                      multicheck.mulFlag3 ? 'multiInput' : 'multiInputErr'
                    "
                  >
                    <input
                      type="checkbox"
                      name="selected"
                      value="C"
                      v-model="checkName"
                    />
                    <span>C、</span>
                    <label for="checkbox" v-html="item.option.C.option"></label>
                  </div>
                  <div
                    :class="
                      multicheck.mulFlag4 ? 'multiInput' : 'multiInputErr'
                    "
                  >
                    <input
                      type="checkbox"
                      name="selected"
                      value="D"
                      v-model="checkName"
                    />
                    <span>D、</span>
                    <label for="checkbox" v-html="item.option.D.option"></label>
                  </div>
                  <div
                    :class="
                      multicheck.mulFlag5 ? 'multiInput' : 'multiInputErr'
                    "
                  >
                    <input
                      type="checkbox"
                      name="selected"
                      value="E"
                      v-model="checkName"
                    />
                    <span>E、</span>
                    <label for="checkbox" v-html="item.option.E.option"></label>
                  </div>
                </template>
              </van-cell>
              <van-button class="multiinputPost" @click="getMultiInput(item)">
                确定
              </van-button>

              <!-- 底部答案 -->
              <div class="getAnswershow" v-if="showdetail">
                <div class="answer">
                  <span class="blue">答案:</span>
                  <span>{{ item.correct_option }}</span>
                </div>
                <div class="consist">
                  <span class="blue"> 解析:</span>
                  <span>
                    <span v-html="item.parse"></span>
                  </span>
                </div>
              </div>
        </div>
      </div>
           
        </div>
        <!-- 问答题 b -->
        <div class="container" v-if="item.type_id === 3">
          <div class="contentText">
            <div class="background">
              <div
                class="back"
                style="color:#4aa5fa ;font-size=20px;padding:20px"
              >
                背景资料
              </div>
              <div
                class="desc"
                v-html="item.materialContent"
                style="font-size=20px;padding:0 20px"
              ></div>
            </div>
            <div class="answerto" style="background-color: #fff">
              <van-cell class="testtitle">
                <template slot="icon">
                  <van-button
                    round
                    size="mini"
                    style="
                      backgroundcolor: #fff1f0;
                      color: #f56c6c;
                      border: 1px solid #ffa39e;
                      margin-top: 16px;
                    "
                    >问答题</van-button
                  ></template
                >
                <template slot="title" style="position: relative">
                  <span
                    class="titleNumber"
                    style="position: absolute; top: 10px"
                    >{{ pageNumber + "、" }}</span
                  >
                  <div
                    class="single"
                    style="text-indent: 20px"
                    v-html="item.title"
                  ></div>
                </template>
              </van-cell>
            </div>

            <div class="box">暂不支持作答</div>
          </div>
          <!-- 底部答案 -->
          <div class="getAnswershow" v-if="showdetail">
            <div class="answer">
              <span class="blue">答案:</span>
              <span
                v-for="(item1, index) in item.correct_option"
                :key="index"
                >{{ item1 + "、 " }}</span
              >
            </div>
            <div class="consist">
              <span class="blue"> 解析:</span>
              <span>
                <span v-html="item.parse"></span>
              </span>
            </div>
          </div>
        </div>
        <!-- 不定项选择 -->
        <div class="container" v-if="item.type_id === 4">
          <div class="contentText">
            <van-cell class="testtitle">
              <template slot="icon">
                <van-button
                  round
                  size="mini"
                  style="
                    backgroundcolor: #e6f7ff;
                    color: #1890ff;
                    border: 1px solid #91d5ff;
                    margin-top: 16px;
                  "
                  >不定项选择</van-button
                ></template
              >
              <template slot="title" style="position: relative">
                <span
                  class="titleNumber"
                  style="position: absolute; top: 10px"
                  >{{ pageNumber + "、" }}</span
                >
                <div
                  class="single"
                  style="text-indent: 20px"
                  v-html="item.title"
                ></div>
              </template>
            </van-cell>
          </div>
          <!-- 底部答案 -->
          <div class="getAnswershow" v-if="showdetail">
            <div class="answer">
              <span class="blue">答案:</span>
              <span
                v-for="(item1, index) in item.correct_option"
                :key="index"
                >{{ item1 + "、 " }}</span
              >
            </div>
            <div class="consist">
              <span class="blue"> 解析:</span>
              <span>
                <span v-html="item.parse"></span>
              </span>
            </div>
          </div>
        </div>
        <!-- 填空题 b   -->
        <div class="container" v-if="item.type_id === 5">
          <div class="contentText">
            <van-cell class="testtitle">
              <template slot="icon">
                <van-button
                  round
                  size="mini"
                  style="
                    backgroundcolor: #e6fffb;
                    color: #13c2c2;
                    border: 1px solid #87e8de;
                  "
                  >填空题</van-button
                ></template
              >
              <template slot="title" style="position: relative">
                <div
                  class="single"
                  style="text-indent: 20px"
                  v-html="item.title"
                ></div>
              </template>
            </van-cell>
          </div>
          <div class="choseAnswer">
            <div class="box" v-if="item.correct_option.length === 6">
              <van-field
                :error="inputFlag.flag1"
                v-model.trim="input.value1"
                label="1"
                placeholder="请输入答案"
              />
              <van-field
                v-model.trim="input.value2"
                :error="inputFlag.flag2"
                label="2"
                placeholder="请输入答案"
              />
              <van-field
                v-model.trim="input.value3"
                :error="inputFlag.flag3"
                label="3"
                placeholder="请输入答案"
              />
              <van-field
                v-model.trim="input.value4"
                :error="inputFlag.flag4"
                label="4"
                placeholder="请输入答案"
              />
              <van-field
                v-model.trim="input.value5"
                :error="inputFlag.flag5"
                label="5"
                placeholder="请输入答案"
              />
              <van-field
                v-model.trim="input.value6"
                :error="inputFlag.flag6"
                label="6"
                placeholder="请输入答案"
              />
            </div>
            <div class="box" v-if="item.correct_option.length === 5">
              <van-field
                :error="inputFlag.flag1"
                v-model.trim="input.value1"
                label="1"
                placeholder="请输入答案"
              />
              <van-field
                v-model.trim="input.value2"
                :error="inputFlag.flag2"
                label="2"
                placeholder="请输入答案"
              />
              <van-field
                v-model.trim="input.value3"
                :error="inputFlag.flag3"
                label="3"
                placeholder="请输入答案"
              />
              <van-field
                v-model.trim="input.value4"
                :error="inputFlag.flag4"
                label="4"
                placeholder="请输入答案"
              />
              <van-field
                v-model.trim="input.value4"
                :error="inputFlag.flag"
                label="5"
                placeholder="请输入答案"
              />
            </div>
            <div class="box" v-if="item.correct_option.length === 4">
              <van-field
                :error="inputFlag.flag1"
                v-model="input.value1"
                label="1"
                placeholder="请输入答案"
              />
              <van-field
                v-model="input.value2"
                :error="inputFlag.flag2"
                label="2"
                placeholder="请输入答案"
              />
              <van-field
                v-model="input.value3"
                :error="inputFlag.flag3"
                label="3"
                placeholder="请输入答案"
              />
              <van-field
                v-model="input.value4"
                label="4"
                placeholder="请输入答案"
              />
            </div>
            <div class="box" v-if="item.correct_option.length == 3">
              <van-field
                :error="inputFlag.flag1"
                clickable
                v-model.trim="input.value1"
                label="1"
                placeholder="请输入答案"
              />
              <van-field
                :error="inputFlag.flag2"
                v-model.trim="input.value2"
                label="2"
                placeholder="请输入答案"
              />
              <van-field
                :error="inputFlag.flag3"
                v-model.trim="input.value3"
                label="3"
                placeholder="请输入答案"
              />
            </div>
            <div class="box" v-if="item.correct_option.length === 2">
              <van-field
                v-model="input.value1"
                :error="inputFlag.flag1"
                label="1"
                placeholder="请输入答案"
              />
              <van-field
                v-model="input.value2"
                :error="inputFlag.flag2"
                label="2"
                placeholder="请输入答案"
              />
            </div>
            <div class="box" v-if="item.correct_option.length === 1">
              <van-field
                v-model="input.value1"
                :error="inputFlag.flag1"
                label="1"
                placeholder="请输入答案"
              />
            </div>
          </div>
          <van-button class="ensure" @click="inputSubmit(item)"
            >确定</van-button
          >
          <!-- 底部答案 -->
          <div class="getAnswershow" v-if="showdetail">
            <div class="answer">
              <span class="blue">答案:</span>
              <span
                v-for="(item1, index) in item.correct_option"
                :key="index"
                >{{ item1 + "、 " }}</span
              >
            </div>
            <div class="consist">
              <span class="blue"> 解析:</span>
              <span>
                <span v-html="item.parse"></span>
              </span>
            </div>
          </div>
        </div>
        <!-- 判断题 b -->
        <div class="container" v-if="item.type_id === 6">
          <div class="contentText">
            <van-cell class="testtitle">
              <template slot="icon">
                <van-button
                  round
                  size="mini"
                  style="
                    backgroundcolor: #f6ffed;
                    color: #67c23a;
                    border: 1px solid #b7eb8f;
                  "
                  >判断题</van-button
                ></template
              >
              <template slot="title" style="position: relative">
                <span
                  class="titleNumber"
                  style="position: absolute; top: 10px"
                  >{{ pageNumber + "、" }}</span
                >
                <div
                  class="single"
                  style="text-indent: 20px"
                  v-html="item.title"
                ></div>
              </template>
            </van-cell>
          </div>
          <van-radio-group
            v-model="radio"
            v-if="Object.getOwnPropertyNames(item.option).length - 1 === 2"
          >
            <!--对象身上属性个数-->
            <!-- {{ Object.getOwnPropertyNames(item.option).length - 1 + '个' }} -->
            <div class="singleRadio" @click="radioSubmit(item)">
              <van-radio :checked-color="radioErr" name="A"> </van-radio
              ><span class="radiotype">A、 </span
              ><span class="radioText" v-html="item.option.A.option"></span>
            </div>
            <div class="singleRadio" @click="radioSubmit(item)">
              <van-radio :checked-color="radioErr" name="B"> </van-radio
              ><span class="radiotype">B、 </span
              ><span class="radioText" v-html="item.option.B.option"></span>
            </div>
          </van-radio-group>
          <!-- 底部答案 -->
          <div class="getAnswershow" v-if="showdetail">
            <div class="answer">
              <span class="blue">答案:</span>
              <span
                v-for="(item1, index) in item.correct_option"
                :key="index"
                >{{ item1 + "、 " }}</span
              >
            </div>
            <div class="consist">
              <span class="blue"> 解析:</span>
              <span>
                <span v-html="item.parse"></span>
              </span>
            </div>
          </div>
        </div>
        <!-- 材料题 -->
        <div class="container" v-if="item.type_id === 7">
          <div class="contentText">
            <van-cell class="testtitle">
              <template slot="icon">
                <van-button
                  round
                  size="mini"
                  style="
                    backgroundcolor: #e6f7ff;
                    color: #1890ff;
                    border: 1px solid #91d5ff;
                    margin-top: 16px;
                  "
                  >材料题</van-button
                ></template
              >
              <template slot="title" style="position: relative">
                <span
                  class="titleNumber"
                  style="position: absolute; top: 10px"
                  >{{ pageNumber + "、" }}</span
                >
                <div
                  class="single"
                  style="text-indent: 20px"
                  v-html="item.title"
                ></div>
              </template>
            </van-cell>
          </div>
          <!-- 底部答案 -->
          <div class="getAnswershow" v-if="showdetail">
            <div class="answer">
              <span class="blue">答案:</span>
              <span
                v-for="(item1, index) in item.correct_option"
                :key="index"
                >{{ item1 + "、 " }}</span
              >
            </div>
            <div class="consist">
              <span class="blue"> 解析:</span>
              <span>
                <span v-html="item.parse"></span>
              </span>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 题目选择 -->
    <van-overlay :show="showChose" class="choseHomework">
      <template slot="default">
        <van-cell
          :title="$route.query.title"
          :value="'共' + idList.length + '道题目'"
        ></van-cell>
        <van-grid :column-num="7">
          <van-grid-item
            v-for="(item, index) in idList"
            :key="index"
            :text="String(index + 1)"
            @click="torightWork(item, index + 1)"
          />
        </van-grid>
      </template>
    </van-overlay>
    <!-- 底部工具 -->
    <van-grid class="bottom-tools" :column-num="3">
      <van-grid-item>
        <template slot="icon"
          ><img
            @click="collect()"
            class="icon-collect"
            src="../../../assets/images/star-icon-2.png"
            v-if="toolsItem.collect_status"
            alt="" />
          <img
            @click="collect()"
            class="icon-collect"
            src="../../../assets/images/star-icon.png"
            v-else
            alt=""
        /></template>
      </van-grid-item>

      <van-grid-item @click="showEdit1 = true" icon="edit" />
      <van-grid-item @click="showdetail = !showdetail" icon="search" />
    </van-grid>
    <!-- 写笔记 -->
    <van-overlay class="editMsk" :show="showEdit1">
      <div class="eidtContent">
        <div class="title">写笔记</div>
        <van-icon class="editClose" @click="showEdit1 = false" name="cross" />
        <textarea
          class="writeContent"
          v-model="editContent"
          cols=""
          rows="6"
        ></textarea>
        <van-button @click="posttNotes1" class="submit" type="info"
          >确认</van-button
        >
      </div>
    </van-overlay>
  </div>
</template>

<script>
import axios from "axios";
import "../../../mock/test/mockjs.js";

import { Notify, Dialog } from "vant";
import { testOne, courseCollect, postOneAnswer, postNotes } from "@/api";
export default {
  data() {
    return {
      active: 0,
      pageNumber: 1,
      idList: [],
      resdatalist: [],
      //  首次  工具栏数据
      toolsItem: {},
      // 显示笔记
      editContent: "",
      showEdit1: false,
      //选择题目
      showChose: false,
      //表单
      input: {
        value1: "",
        value2: "",
        value3: "",
        value4: "",
        value5: "",
        value6: "",
      },
      inputFlag: {
        flag1: false,
        flag2: false,
        flag3: false,
        flag4: false,
        flag5: false,
        flag6: false,
      },
      //多选
       checkName: [],
      //多选校验
      multicheck: {
        mulFlag1: true,
        mulFlag2: true,
        mulFlag3: true,
        mulFlag4: true,
        mulFlag5: true,
      },
      //单选按钮
      radio: null,
      radioErr: "",
      //展示解析
      showdetail: false,
      //监听 跳转状态
      showToRightpageState: this.$store.state.homework.chapTerState.answering,
    };
  },
  created() {
     this.getList1();
  },
 async mounted() {
   this.lastWork();
/*  try {
      const { data: res } = await axios.get('http://fangkai.com/getlist')
      console.log(res,1111);      
      this.idList = res.idList;
      this.resdatalist = res.list;
      this.toolsItem = res.list[0];
  } catch (error) {
  
} */
  },
  beforeDestroy() {
    //退出把题目id  页面页码  保存
    this.chapTerIdChage();
  },
  methods: {
    //退出把题目id  页面页码  保存
    chapTerIdChage() {
      this.$store.commit("homework/chapTerIdChage", {
        id: this.toolsItem.id,
        index: this.pageNumber,
      });
    },
    //  询问是否跳转上一次答题页面
    lastWork() {
      if (this.showToRightpageState === true) {
        Dialog.confirm({
          title: "温馨提示",
          confirmButtonColor: "#0486fe",
          message:
            "检测到上次练习题到第" +
            this.$store.state.homework.chapTerState.answeringIndex +
            "题，" +
            "是否继续?",
        })
          .then(() => {
            // on confirm
            this.torightWork(
              this.$store.state.homework.chapTerState.answeringId,
              this.$store.state.homework.chapTerState.answeringIndex
            );
          })
          .catch(() => {
            // on cancel
          });
      }
    },
    //交笔记
    async posttNotes1() {
      //  console.log(this.toolsItem, this.editContent, "笔记");
      const data = {
        questionId: this.toolsItem.id,
        uid: this.$store.state.uid,
        content: this.editContent,
      };
      try {
        const { data: res } = await postNotes(data);
        console.log(res, this.editContent, "笔记");
      } catch (err) {
        console.log(err);
      }
    },
    //收藏
    async collect() {
      //当前页面 收藏状态要取反
      this.toolsItem.collect_status = !this.toolsItem.collect_status;
      try {
        const { data: res } = await courseCollect({
          questionId: this.toolsItem.id,
          uid: this.$store.state.uid,
        });
      } catch (err) {
        console.log(err);
      }
    },
    //跳转哪一题
    torightWork(id, index) {
      this.showdetail = false;
      //清空值
      (this.radio = ""),
        (this.input = {
          value1: "",
          value2: "",
          value3: "",
          value4: "",
          value5: "",
          value6: "",
        }),
        //解除报红
        (this.inputFlag = {
          flag1: false,
          flag2: false,
          flag3: false,
          flag4: false,
          flag5: false,
          flag6: false,
        }),
      //  console.log(id, index);
      this.pageNumber = index;
      this.active = index - 1;
      //关闭弹窗
      this.showChose = false;
      //底部工具栏数据绑定
      this.toolsItem = this.resdatalist.filter((item) => {
            return item.id == id;
      });
      // console.log(this.toolsItem ,'跳转1');
      //转化下数据类型  把[{…}, __ob__: Observer]   转化 {…}
      let itemArr = JSON.parse(JSON.stringify(this.toolsItem[0]));
      // console.log(itemArr,'shuzu');
      this.toolsItem = itemArr;
      //赋值笔记先
      this.editContent = this.toolsItem.notes;
      console.log(this.toolsItem, "跳转2", this.editContent);
      //  填空题  如果答题过就要进行赋值表单
      const flag = this.$store.state.homework.chapTer.filter((item) => {
        return item.Cid === this.toolsItem.id;
      });
      //  console.log(flag[0].Canswer.length,"跳转填空",this.input);
      if (flag.length === 0) {
        return true;
      }
      if (flag[0].typeId === 5) {
        //赋值给表单    目前最多6情况
        if (flag[0].Canswer.length === 1) {
          this.input.value1 = flag[0].Canswer[0];
        } else if (flag[0].Canswer.length === 2) {
          this.input.value1 = flag[0].Canswer[0];
          this.input.value2 = flag[0].Canswer[1];
        } else if (flag[0].Canswer.length === 3) {
          this.input.value1 = flag[0].Canswer[0];
          this.input.value2 = flag[0].Canswer[1];
          this.input.value3 = flag[0].Canswer[2];
        } else if (flag[0].Canswer.length === 4) {
          this.input.value1 = flag[0].Canswer[0];
          this.input.value2 = flag[0].Canswer[1];
          this.input.value3 = flag[0].Canswer[2];
          this.input.value4 = flag[0].Canswer[3];
        } else if (flag[0].Canswer.length === 5) {
          this.input.value1 = flag[0].Canswer[0];
          this.input.value2 = flag[0].Canswer[1];
          this.input.value3 = flag[0].Canswer[2];
          this.input.value4 = flag[0].Canswer[3];
          this.input.value5 = flag[0].Canswer[4];
        } else if (flag[0].Canswer.length === 6) {
          this.input.value1 = flag[0].Canswer[0];
          this.input.value2 = flag[0].Canswer[1];
          this.input.value3 = flag[0].Canswer[2];
          this.input.value4 = flag[0].Canswer[3];
          this.input.value5 = flag[0].Canswer[4];
          this.input.value6 = flag[0].Canswer[5];
        }
        this.checkInput();
        this.showdetail = true;
        Notify({
          message: "您答过本题",
          color: "#d53130",
          background: "#ffe1e1",
          duration: 600,
        });
      } else if (flag[0].typeId === 1 || flag[0].typeId === 6) {
        //单选和判断
        this.showdetail = true;
        Notify({
          message: "您答过本题",
          color: "#d53130",
          background: "#ffe1e1",
          duration: 600,
        });
        this.radio = flag[0].Canswer;
        //检查单选错误
        if (this.toolsItem.correct_option !== this.radio) {
          this.radioErr = "#ee0a24";
        } else {
          this.radioErr = "";
        }
      }else if(flag[0].typeId===2){
        //多选
        console.log(2);
      }
    },
    //判断是否答题过
    hasAnswer() {
      const flag = this.$store.state.homework.chapTer.filter((item) => {
        return item.Cid === this.toolsItem.id;
      });
      //  console.log(flag[0].Canswer.length,"跳转填空",this.input);
      if (flag.length !== 0) {
        Notify({
          message: "您答过本题",
          color: "#d53130",
          background: "#ffe1e1",
          duration: 600,
        });
        return true;
      }
    },
    //定义 填空题 请求
    async postOneAnswer2() {
      //看仓库是否答题过
      if (this.hasAnswer() === true) {
        return true;
      }
      // 根据数组长度判断 提交个数
      let answer = [];
      if (this.toolsItem.correct_option.length === 6) {
        //  answer=[this.input.value1,this.input.value2,this.input.value3,this.input.value4]
        answer.push(this.input.value1);
        answer.push(this.input.value2);
        answer.push(this.input.value3);
        answer.push(this.input.value4);
        answer.push(this.input.value5);
        answer.push(this.input.value6);
      } else if (this.toolsItem.correct_option.length === 5) {
        //  answer=[this.input.value1,this.input.value2,this.input.value3,this.input.value4]
        answer.push(this.input.value1);
        answer.push(this.input.value2);
        answer.push(this.input.value3);
        answer.push(this.input.value4);
        answer.push(this.input.value5);
      } else if (this.toolsItem.correct_option.length === 4) {
        answer.push(this.input.value1);
        answer.push(this.input.value2);
        answer.push(this.input.value3);
        answer.push(this.input.value4);
      } else if (this.toolsItem.correct_option.length === 3) {
        answer.push(this.input.value1);
        answer.push(this.input.value2);
        answer.push(this.input.value3);
      } else if (this.toolsItem.correct_option.length === 2) {
        answer.push(this.input.value1);
        answer.push(this.input.value2);
      } else if (this.toolsItem.correct_option.length === 1) {
        answer.push(this.input.value1);
      }
      this.checkInput();
      //  console.log(answer,'内容');
      const data = {
        currentId: this.toolsItem.id,
        uid: this.$store.state.uid,
        answer: answer,
      };
      try {
        const { data: res } = await postOneAnswer(data);
        console.log(res, "提交单次");
        //  存对象
        // console.log(this.toolsItem.id, "页面", answer);
        this.$store.commit("homework/addcapter", {
          Cid: this.toolsItem.id,
          Canswer: answer,
          typeId: this.toolsItem.type_id,
        });
        console.log(this.$store.state.homework.chapTer, "存vuex");
        this.showdetail = true;
        //tab页面改变  清空表单值  falg=false
      } catch (error) {
        console.log(error);
      }
    },
    //检查表单错误
    checkInput() {
      //判断答案是否正确
      if (this.input.value1 !== this.toolsItem.correct_option[0]) {
        this.inputFlag.flag1 = true;
      } else {
        this.inputFlag.flag1 = false;
      }
      if (this.input.value2 !== this.toolsItem.correct_option[1]) {
        this.inputFlag.flag2 = true;
      } else {
        this.inputFlag.flag2 = false;
      }
      if (this.input.value3 !== this.toolsItem.correct_option[2]) {
        this.inputFlag.flag3 = true;
      } else {
        this.inputFlag.flag3 = false;
      }
      if (this.input.value4 !== this.toolsItem.correct_option[3]) {
        this.inputFlag.flag4 = true;
      } else {
        this.inputFlag.flag4 = false;
      }
      if (this.input.value5 !== this.toolsItem.correct_option[4]) {
        this.inputFlag.flag5 = true;
      } else {
        this.inputFlag.flag5 = false;
      }
      if (this.input.value6 !== this.toolsItem.correct_option[5]) {
        this.inputFlag.flag6 = true;
      } else {
        this.inputFlag.flag6 = false;
      }
    },
    inputSubmit() {
      this.postOneAnswer2();
    },
    // 定义请求  单选类型
    async postOneAnswer1(item) {
      //看仓库是否答题过
      if (this.hasAnswer() === true) {
        return true;
      }
      // console.log("ooo", this.toolsItem.id)
      // console.log(item.id, "请求");
      const data = {
        currentId: item.id,
        uid: this.$store.state.uid,
        answer: this.radio,
      };
      //检查单选错误
      if (item.correct_option !== this.radio) {
        this.radioErr = "#ee0a24";
      } else {
        this.radioErr = "";
      }
      // console.log(this.radioErr, "空");
      try {
        const { data: res } = await postOneAnswer(data);
        console.log(res, "提交单次");
        this.showdetail = true;
        //  存对象
        console.log(this.toolsItem.id, "页面", this.radio);
        this.$store.commit("homework/addcapter", {
          Cid: this.toolsItem.id,
          Canswer: this.radio,
          typeId: this.toolsItem.type_id,
        });
        console.log("cun单选");
      } catch (error) {
        console.log(error);
      }
    },
    radioSubmit(item) {
      //打印选择答案
      console.log(this.radio);
      console.log(item);
      this.postOneAnswer1(item);
    },
    //多选
      //提交多选  填空同理
    async getMultiInput(item) {
       let answer = Object.values(this.checkName);
      //  console.log(answer,'answer');
      // 根据数组长度判断 提交个数
        const data = {
        currentId: item.id,
        uid: this.$store.state.uid,
        answer: answer ,
      };
      console.log(data,'checkname');
      try {
        const { data: res } = await postOneAnswer(data);
        console.log(res, "提交单次");
        //检查结果
        this.checkMulinput()
        //存 
        this.$store.commit("homework/addcapter", {
          Cid: this.toolsItem.id,
          Canswer: this.checkName,
          typeId: this.toolsItem.type_id
        });
      } catch (error) {
        console.log(error);
      }
    },
    //检查多选框
    checkMulinput(){
        var arr1 = this.checkName;
            var arr2 = this.toolsItem.correct_option
              .split("")
              .join(" ")
              .split(" ");
            let arr3 = [];
            for (let i = 0; i < arr1.length; i++) {
              for (let j = 0; j < arr2.length; j++) {
                if (arr2.indexOf(arr1[i]) === -1) {
                  arr3.push(arr1[i]);
                }
              }
              arr3 = Array.from(new Set(arr3));
              console.log(arr3, "错误");
              //数组包含这一项   多选校验
              if (arr3.indexOf("A") > -1) {
                this.multicheck.mulFlag1 = false;
              }
              if (arr3.indexOf("B") > -1) {
                this.multicheck.mulFlag2 = false;
              }
              if (arr3.indexOf("C") > -1) {
                this.multicheck.mulFlag3 = false;
              }
              if (arr3.indexOf("D") > -1) {
                this.multicheck.mulFlag4 = false;
              }
              if (arr3.indexOf("E") > -1) {
                this.multicheck.mulFlag5 = false;
              }
            }
    },
    async getList1() {
      try {
         const { data: res } = await testOne({
          uid: this.$store.state.uid,
          subjectId: this.$route.query.id,
        });
        console.log(res,res.data.list, res.data.idList, "获取");
        this.idList = res.data.idList;
        this.resdatalist = res.data.list;
        this.toolsItem = res.data.list[0];
        console.log(this.toolsItem, "渲染");  
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/div.van-tabs.van-tabs--line > div.van-tabs__wrap {
  display: none;
}
// 标题
.testtitle {
  background-color: #efeff4;
}
// 底部工具
.bottom-tools {
  background: #fff;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0px 0px 0px #e1e1e1;
  img {
    width: 24px;
    height: 24px;
  }
}
//笔记样式
.editMsk {
  width: 100%;
  height: 100%;
  background-color: rgba($color: #000000, $alpha: 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  .eidtContent {
    border-radius: 8px;
    width: 300px;
    height: 300px;
    position: relative;
    background-color: #fff;
    .title {
      text-align: center;
      font-size: 18px;
      color: #060606;
      line-height: 36px;
      font-weight: 600;
      position: relative;

      .titleNumber {
        position: absolute;
        top: 30px;
        left: 30px;
      }
    }
    /deep/.single > p {
      margin: 0px;
    }
    .editClose {
      position: absolute;
      top: 10px;
      right: 12px;
    }
    .writeContent {
      margin-left: 30px;
      border: 1px solid #e6e8ed;
      background-color: #f6f6f6;
      font-size: 24px;
    }
    .submit {
      width: 200px;
      height: 36px;
      margin-left: 50px;
      margin-top: 20px;
    }
  }
}
//标题选择背景色
.choseHomework {
  background-color: #fff;
}

.contentText {
  background-color: #efeff4;
}
.choseAnswer {
  background-color: #efeff4;
  padding: 0 10px;
  .box {
    .van-field {
      margin-bottom: 10px;
    }
  }
}
.container {
  background-color: #efeff4;
  height: 100vh;
}
/deep/.ensure {
  margin-top: 10px;
  background-color: #1890ff;
  font-size: 20px;
  width: 100%;
  color: #fff;
}
//填空题内边距 变小
/deep/.van-field__label {
  width: 20px;
  margin-right: 5px;
}
.getAnswershow {
  padding-top: 20px;
  padding-left: 6px;

  .answer {
    display: flex;
    justify-content: start;
  }
  .consit {
    p {
      text-indent: 30px;
    }
  }
  .blue {
    color: #0486fe;
  }
}
.singleRadio {
  background-color: #fff;

  height: 60px;
  margin: 10px;
  display: flex;
  line-height: 60px;
  .van-radio {
    margin-left: 15px;
  }
  .radiotype {
    margin-left: 10px;
  }
}
/deep/.radioText p{
  margin-top: 0px;
}
//滚动条样式
.container {
  overflow-y: scroll;
  scroll-behavior: smooth;
  overscroll-behavior: contain; //必须加这个，不然会带动整个屏幕滚动，如果整屏幕也有滚动的话
  & ::-webkit-scrollbar-track-piece {
    background: rgba(242, 242, 242, 1);
  }
  &::-webkit-scrollbar {
    width: 2px;
  }
  &::-webkit-scrollbar-thumb {
    background: #efeff4;
    background-clip: padding-box;
  }
}
.dragAnswer{
  padding-bottom: 200px;
}
.multiinputPost {
  width: 100%;
  display: block;
  background: rgba(24, 144, 255, 1);
  height: 35px;
  color: #fff;
  line-height: 35px;
  border-radius: 5px;
  font-size: 16px;
  margin: 0 12px 12px;
}
.multiInputErr {
  display: flex;
  color: red;
}
</style>
